<!--ref对象-->
<script setup>
import {ref} from 'vue'
import TestCon from '@/components/TestCon.vue'
// 模板引用，可以获取dom，也可以获取组件
// 1.调用ref函数，生成一个ref对象
// 2.通过ref标识进行绑定
// 3.通过ref对象.value即可访问到绑定的元素，必须渲染完成后才能拿到
const inputRef = ref(null)
const focusInput = () => {
  inputRef.value.focus()
}

const conRef = ref(null)
const logCon = () => {
  // 直接获取是获取不到的，因为测试组件没有将这个属性暴露出来，需要被调用组件使用 编译宏 defineExpose 暴露
  console.log(conRef.value.testProps)
}
</script>

<template>
  <input type="text" ref="inputRef"/>
  <button @click="focusInput">点击让输入框聚焦</button>
  <hr>
  <TestCon ref="conRef"></TestCon>
  <button @click="logCon">打印组件</button>
</template>
